<template>
  <div id="report">
    <!-- 弹出层 -->
    <van-dialog
      :before-close="beforeClose"
      v-model="show"
      title="请选择相关活动轨迹"
      show-cancel-button
    >
      <van-cell
        title="请有以下活动轨迹的人员立即向所在社区(村)报备，配合社区 (村) 做好相应分类管控措施。"
      />
      <van-checkbox-group v-model="result" class="check-group">
        <van-checkbox
          class="checkbox"
          shape="square"
          v-for="item in list"
          :key="item.id"
          :name="item.id"
          >{{ item.area_time }}-{{ item.area }}</van-checkbox
        >
      </van-checkbox-group>
    </van-dialog>
    <!-- 选择器 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="pickerData"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <!-- 页面头部图片 -->
    <img class="header" src="../../assets/images/report.png" />
    <!-- 表单 -->
    <div class="bodyer">
      <van-form @submit="onSubmit">
        <van-field
          v-model.trim="form.name"
          name="name"
          label="姓名"
          placeholder="请输入姓名"
          required
          :rules="[{ required: true, trigger: ['blur', 'change'] }]"
          colon
          center
          label-class="labeltext"
        />
        <van-field
          readonly
          clickable
          v-model.trim="form.sex"
          name="sex"
          label="性别"
          placeholder="点击选择性别"
          required
          :rules="[{ required: true, trigger: ['blur', 'change'] }]"
          @click="pickerChange('sex')"
          colon
          center
          label-class="labeltext"
        />
        <van-field
          readonly
          clickable
          v-model.trim="form.cate"
          name="cate"
          label="证件类型"
          placeholder="点击选择证件类型"
          required
          :rules="[{ required: true, trigger: ['blur', 'change'] }]"
          @click="pickerChange('cate')"
          colon
          center
          label-class="labeltext"
        />
        <van-field
          v-model.trim="form.card_no"
          name="card_no"
          label="证件号码"
          placeholder="请输入证件号码"
          required
          :rules="[
            { required: true, trigger: ['blur', 'change', 'onBlur'] },
            {
              validator: value => {
                if (this.form.cate !== '其他') {
                  return /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/.test(
                    value
                  )
                }
              },
              trigger: 'onBlur'
            }
          ]"
          maxlength="18"
          colon
          center
          label-class="labeltext"
        />
        <van-field
          v-model.number="form.phone"
          name="phone"
          label="手机号码"
          placeholder="请输入手机号码"
          required
          :rules="[
            { required: true, trigger: ['blur', 'change', 'onBlur'] },
            {
              validator: value => {
                return /^1[3|4|5|8][0-9]\d{4,8}$/.test(value)
              },
              trigger: 'onBlur'
            }
          ]"
          maxlength="11"
          colon
          center
          label-class="labeltext"
        />
        <van-field
          readonly
          clickable
          v-model.trim="form.transfer"
          name="transfer"
          label="是否中转"
          placeholder="点击选择是否中转"
          required
          :rules="[{ required: true, trigger: ['blur', 'change'] }]"
          @click="pickerChange('transfer')"
          colon
          center
          label-class="labeltext"
        />
        <van-field
          v-if="form.transfer === '否'"
          v-model.trim="form.stagssq"
          readonly
          clickable
          name="stagssq"
          label="在连住址"
          placeholder="点击选择来连住址"
          @click="pickerChange('stagssq')"
          required
          :rules="[{ required: true, trigger: ['blur', 'change'] }]"
          colon
          center
          label-class="labeltext"
        />
        <van-field
          v-if="form.transfer === '酒店'"
          v-model.trim="form.hotel"
          name="hotel"
          label="酒店名称"
          placeholder="请输入酒店名称"
          required
          :rules="[{ required: true, trigger: ['blur', 'change'] }]"
          colon
          center
          label-class="labeltext"
        />
        <van-field
          v-if="form.transfer === '是'"
          v-model.trim="form.stagarea"
          readonly
          clickable
          name="stagarea"
          label="目的地"
          placeholder="点击选择目的地"
          @click="pickerChange('stagarea')"
          required
          :rules="[{ required: true, trigger: ['blur', 'change'] }]"
          colon
          center
          label-class="labeltext"
        />
        <van-field
          v-model.trim="form.address"
          name="address"
          label="详细地址"
          placeholder="请输入详细地址"
          required
          :rules="[{ required: true, trigger: ['blur', 'change'] }]"
          colon
          center
          label-class="labeltext"
        />
        <div class="footer" style="margin: 16px">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { areaReport, insertReport, updateData } from '@/api/reporting/report'
import area from '../../libs/area_text.json'
import ssq from '../../libs/ssq.json'
export default {
  name: 'Report',
  data() {
    return {
      list: [],
      show: true,
      showPicker: false,
      pickerData: [],
      pickerType: '',
      result: [],
      username: '',
      form: {},
      ssqList: [],
      areaList: []
    }
  },
  created() {
    this.init()
    if (!this.$common.xeUtils.isEmpty(this.$route.query)) {
      this.form = this.$route.query
    }
    if (!this.$common.xeUtils.isEmpty(this.$store.state.report.form)) {
      this.form = this.$store.state.report.form
      this.show = false
    }
  },
  methods: {
    pickerChange(type) {
      this.pickerType = type
      switch (type) {
        case 'sex':
          this.pickerData = ['男', '女']
          this.showPicker = true
          break
        case 'cate':
          this.pickerData = ['身份证', '其他']
          this.showPicker = true
          break
        case 'transfer':
          this.pickerData = ['是', '否', '酒店']
          this.showPicker = true
          break
        case 'stagssq':
          this.pickerData = this.ssqList
          this.showPicker = true
          break
        case 'stagarea':
          this.pickerData = this.areaList
          this.showPicker = true
          break
        default:
          break
      }
    },
    onConfirm(value) {
      switch (this.pickerType) {
        case 'sex':
          this.form.sex = value.replace(/\s*/g, '')
          break
        case 'cate':
          this.form.cate = value.replace(/\s*/g, '')
          break
        case 'transfer':
          this.form.transfer = value.replace(/\s*/g, '')
          break
        case 'stagssq':
          this.form.district = value[0].replace(/\s*/g, '')
          this.form.street = value[1].replace(/\s*/g, '')
          this.form.community = value[2].replace(/\s*/g, '')
          this.form.stagssq = value.toString().replace(/\s*/g, '')
          break
        case 'stagarea':
          this.form.end_province = value[0].replace(/\s*/g, '')
          this.form.end_city = value[1].replace(/\s*/g, '')
          this.form.end_district = value[2].replace(/\s*/g, '')
          this.form.stagarea = value.toString().replace(/\s*/g, '')
          break
        default:
          break
      }
      this.showPicker = false
    },
    onSubmit() {
      // 表单提交按钮
      if (this.form.id) {
        updateData({
          ...this.form,
          loginNo: ''
        }).then(res => {
          if (res.data.errcode === 0) {
            this.form.id = res.data.data
            this.$store.dispatch('setForm', this.form)
            this.$router.push('/result')
          } else {
            this.$toast.fail(res.data.errmsg)
          }
        })
      } else {
        insertReport({
          ...this.form,
          loginNo: ''
        }).then(res => {
          if (res.data.errcode === 0) {
            this.form.id = res.data.data
            this.$store.dispatch('setForm', this.form)
            this.$router.push('/result')
          } else {
            this.$toast.fail(res.data.errmsg)
          }
        })
      }
    },
    init() {
      // 获取区,街道,社区
      this.ssqList = ssq
      // 获取省,市,区
      this.areaList = area
      // 获取活动轨迹
      areaReport().then(result => {
        this.list = result.data.data
      })
    },
    beforeClose(action, done) {
      if (action === 'confirm') {
        if (this.result.length === 0) {
          done(false)
        } else {
          this.form.relationList = this.result.toString()
          done()
        }
      } else {
        done()
        this.$router.go(-1)
      }
    }
  }
}
</script>

<style scoped lang="less">
#report {
  width: 100%;
  height: 100%;
  .check-group {
    width: 80%;
    padding: 0.5rem;
    margin: 0 auto;
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
    .checkbox {
      padding: 0.4rem 0;
    }
  }
  .header {
    width: 100%;
    height: 9rem;
    box-shadow: 4px 2px 4px #d1d2d4;
  }
  .bodyer {
    width: 100%;
    height: calc(100% - 9.5rem);
    overflow: hidden auto;
    /deep/ .labeltext {
      text-align-last: justify;
    }
  }
}
</style>
